<template>
    <div class="template">
        <div class="temMain">
            <div class="nav">
                <img :src="back" style="width: 37px;" @click="router.back()"/>
                <img :src="MySavedRecipes" style="width: 194px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);"/>
                <div style="width: 37px;"></div>
            </div>
            <div v-if="historyList.length <= 0" class="noData">
                <img :src="favoritespage_img" style="width: 272px;" />
            </div>
            <div v-else class="haveData">
                <div v-for="(item, index) in historyList" :key="index" style="flex-shrink: 0;" >
                    <div class="block">
                        <img :src="item.img" style="height: 100%;width: 100%;" v-if="item.img" @click="gotoPath(!!item.img, index ,item.index )"/>
                        <img :src="recipesList[item.index]" style="height: 100%;width: 100%;" v-else @click="gotoPath(!!item.img, index ,item.index )"/>
                        <div class="close" @click="deleteItem(!!item.img, index ,item.index)">
                            <img :src="close" style="width: 14px;"/>
                        </div>
                        <div class="info">
                            <van-rate style="margin-top: 10px;" v-model="item.rate" :size="20" color="#ffd21e" void-icon="star" void-color="#eee" @change="(value) => onChange(value, !!item.img, index ,item.index)" clearable/>
                            <div class="title">{{ item.name || recipeList[item.index].name}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { recipeList } from '../recipe'
import back from '../assets/back.png'
import MySavedRecipes from '../assets/MySavedRecipes.png'
import favoritespage_img from '../assets/favoritespage_img.png'
import recipes1 from '../assets/recipesImg/recipes1.png'
import recipes2 from '../assets/recipesImg/recipes2.png'
import recipes3 from '../assets/recipesImg/recipes3.png'
import recipes4 from '../assets/recipesImg/recipes4.png'
import recipes5 from '../assets/recipesImg/recipes5.png'
import recipes6 from '../assets/recipesImg/recipes6.png'
import close from '../assets/close.png'
import { useRouter } from 'vue-router';
import { onMounted, ref } from 'vue'
import { showConfirmDialog } from 'vant';
const router = useRouter()
const historyList = ref([])
const recipesList = [recipes1, recipes2, recipes3, recipes4, recipes5, recipes6]
onMounted(() => {
    let recipeList = localStorage.getItem('recipeList') ? JSON.parse(localStorage.getItem('recipeList')) : []
    let recipeXT = JSON.parse(localStorage.getItem('recipeXT')).map((item, index) => ({...item, index}) ) .filter(item => item.collect == 1)
    historyList.value = [...recipeList, ...recipeXT]
    console.log(historyList.value);
})
const deleteItem = (type, index, XTindex) => {
    showConfirmDialog({
          message: 'Are you sure you want to delete it?',
          confirmButtonText: 'Confirm',
          cancelButtonText: 'Cancel'
        }).then(() => {
            if (type) {
                let data = JSON.parse(localStorage.getItem('recipeList'))
                data.splice(index, 1)
                localStorage.setItem('recipeList', JSON.stringify(data))
            }else {
                let data = JSON.parse(localStorage.getItem('recipeXT'))
                data[XTindex].collect = 0
                localStorage.setItem('recipeXT', JSON.stringify(data))
            }
            let data2 = historyList.value
            data2.splice(index, 1)
            historyList.value =data2
        })

}
const onChange = (value, type, index, XTindex) => {
    console.log(value,type, index, XTindex);
    if (type) {
        let data = JSON.parse(localStorage.getItem('recipeList'))
        data[index].rate = value
        localStorage.setItem('recipeList', JSON.stringify(data))
    }else{
        let data = JSON.parse(localStorage.getItem('recipeXT'))
        data[XTindex].rate = value
        localStorage.setItem('recipeXT', JSON.stringify(data))
    }

}
const gotoPath = (type, index, XTindex) => {
    if (type) {
        router.push('/recipesItem?type=1&id='+index)
    }else{
        router.push('/recipesItem?type=0&id='+XTindex)
    }
}
</script>
<style scoped>
@import '../font/font.css';
.noData {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
}
.haveData {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 10px;
    max-height: 85vh;
    overflow: auto;
}
.block {
    width: 157px;
    height: 156px;
    position: relative;
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: 15px;
}
.close {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 21px;
    height: 21px;
    background: #472A2A;
    opacity: 0.8;
    border-radius: 21px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.info {
    width: 145px;
    height: 64px;
    background-color: rgba(76, 39, 39, 0.6);
    border-radius: 17px 17px 17px 17px;
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    font-weight: 400;
    font-size: 20px;
    color: #FFFFFF;
    white-space: nowrap;
    font-family: BalooChettan-Regular;
}
.title {
    width: 80%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>